<template>
  <div
    ref="inputBox"
    class="absolute left-0 w-full z-100"
    :class="inputVisible ? 'bottom-0' : 'bottom-[-50vh]'"
  >
    <div
      :class="[`mask-${maskType}`]"
      class="mask-r w-full mb-2px pl-8px text-white leading-[1.6] text-[12px] flex flex-nowrap overflow-x-auto overflow-y-hidden"
      @scroll="onScroll"
    >
      <div
        v-for="x in ttsaStore.questions"
        :key="x.id"
        class="relative h-full pl-[0] flex-shrink-0"
        @click="send(x.question_title, x.id)"
      >
        <qu-wrapper class="relative z-1">{{ x.question_title }}</qu-wrapper>
      </div>
    </div>
    <div
      class="py-[7px] px-[8px] w-full h-[50px] flc"
      :class="$style['input-asr']"
    >
      <input
        id="x-yl-input-asr"
        ref="input"
        v-model="text"
        type="text"
        class="outline-0 h-full flex-1 px-[10px] text-[15px] mr-8px tracking-2px"
        :class="$style['asr-text']"
        @keypress.enter.stop="send()"
      >
      <button
        class="w-[75px] h-full"
        :class="$style['special-button']"
        :disabled="!text"
        @click="send()"
      ></button>
    </div>
  </div>
</template>

<script
  lang="ts"
  setup
  name="InputAsr"
>
import { useTtsaStore } from '@/store/ttsa'
import { useTost } from '@/utils/comps'
import { isIos } from '@/utils/client'

const ttsaStore = useTtsaStore()

const inputVisible: any = inject('inputVisible')
const inputFocus = ref(false)
const text = ref('')
const inputBox = ref()
const input = ref()
const maskType = ref('right') // 三种mask样式

const onBlur = () => {
  input.value.blur()
  inputVisible.value = false
  inputFocus.value = false
}

watch(inputVisible, (v) => {
  if (v) {
    if (isIos()) {
      input.value.focus()
      inputFocus.value = true
    } else {
      setTimeout(() => {
        input.value.focus()
        inputFocus.value = true
      }, 60)
    }
  } else {
    input.value.blur()
  }
})

const onScroll = (e) => {
  const scrollLen = e?.target?.scrollLeft;
  const isBottom = (e.target?.scrollWidth - scrollLen) === e?.target?.clientWidth;
  if (isBottom) {
    maskType.value = 'left'
  } else if (scrollLen === 0) {
    maskType.value = 'right'
  } else {
    maskType.value = 'normal'
  }
}

const send = (tx?, tId?) => {
  const s = tx || text.value || ''
  if (!s.trim()) {
    useTost('请勿发送空内容')
    return
  }
  ttsaStore.voiceActiveId = tId
  ttsaStore.chat(s.trim())
    .then(() => {
      text.value = ''
      onBlur()
    })
    .catch(() => useTost('未匹配到问题答案'))
}

const clickAway = (ev) => {
  if (!inputBox.value.contains(ev.target)) onBlur();
}

onMounted(() => {
  document.addEventListener('click', clickAway, true)
})

onBeforeUnmount(() => {
  document.removeEventListener('click', clickAway, true)
})

</script>

<style lang="scss" scoped>
.mask-normal {
  mask: linear-gradient(to right, transparent 0, black 50px, black 320px, transparent 100%);
  -webkit-mask: linear-gradient(to right, transparent 0, black 50px, black 320px, transparent 100%);
}

.mask-right {
  mask: linear-gradient(to right, transparent 0, black 0px, black 320px, transparent 100%);
  -webkit-mask: linear-gradient(to right, transparent 0, black 0px, black 320px, transparent 100%);
}

.mask-left {
  mask: linear-gradient(to right, transparent 0, black 50px);
  -webkit-mask: linear-gradient(to right, transparent 0, black 50px);
}

::-webkit-scrollbar {
  width: 0px;
  height: 0;
  background-color: transparent;
}
</style>

<style
  module 
  lang="scss"
>
.input-asr {
  background: rgba(4, 15, 44, 0.75);
  @include set-backdrop(2px);
  border-radius: 12px 12px 0px 0px;

  .asr-text {
    color: white;
    background: rgba(9, 41, 69, 0.65);
    border-radius: 6px;
    box-shadow: 0 0 20px 0 rgba(#35aaff, 0.25) inset;
  }
}

.text-bg {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(17, 45, 101, 0.25);
  box-shadow: 0px 0px 24px rgba(0, 163, 255, 0.45) inset;
  border: 1px solid rgba(17, 102, 181, 1);
  @include set-backdrop(2px);

  /* @include set-clip(polygon(0 0, 0 100%, 155px 100%, 100% 50%, 100% 0)); */
  &.active {
    background: rgba(17, 45, 101, 1);
  }
}

.special-button {
  background-image: url(../../../assets/images/send/send.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;

  &:active {
    background-image: url(../../../assets/images/send/send_active.png);
  }

  &:disabled {
    background-image: url(../../../assets/images/send/send_disable.png);
  }
}
</style>
